<template>
    <n-modal v-model:show="show">
        <n-card :bordered="false" :mask-closable="true" size="huge" role="dialog" aria-modal="true"
            style="width: 450px">
            <!-- <template #header-extra>
        噢！
      </template> -->
            <div class="form-popup">
                <div class="dialog-box-title">
                    <h3>DIY个性、团队订制游</h3>
                    <!-- <span class="dialog-box-close" @click="onClose">×</span> -->
                </div>
                <div class="form-item">
                    <input v-model="data.name" class="text" name="name" type="text" placeholder="称呼">
                </div>
                <div class="form-item">
                    <input v-model="data.tel" class="text" name="tel" type="text" placeholder="电话">
                </div>
                <div class="form-item">
                    <input v-model="data.nums" class="text" name="nums" type="text" placeholder="人数">
                </div>
                <div class="form-item">
                    <textarea v-model="data.question" class="textarea" name="question" cols="" placeholder="备注信息"
                        rows=""></textarea>
                </div>
                <div class="form-item">
                    <div class="dialog-close" @click="onClose">取消</div>
                    <div @click="submit" class="submit">提交出行需求</div>
                </div>
                <div>
                </div>
            </div>
        </n-card>
    </n-modal>

</template>

<script setup>
import { ref } from 'vue';
import { other_demand_add } from '@/api/travel';
import { useMessage } from 'naive-ui';
const message = useMessage();

let show = ref(false)

let data = ref({
    name: '',
    question: '',
    nums: '',
    tel: '',
})

const open = () => {
    show.value = true;
}

const error = () => {
    message.error("Once upon a time you dressed so fine");
}
const onClose = () => {
    show.value = false;
    data.value = {
        name: '',
        question: '',
        nums: '',
        tel: '',
    }
}

const submit = async () => {
    // 检查手机号

    if (!data.value.tel) {
        message.error("联系方式不能为空");
        return;
    } else if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.value.tel)) {
        message.error("电话号码格式错误");
    }

    let res = await other_demand_add(data.value);
    onClose();
}



defineExpose({
    open
});

</script>


<style lang="scss" scoped>
.shade {
    /* width: 100vw;
    height: 100vh;
    background: red;
    position: fixed;
    top: 0; */
    /* background: rgba(0,0,0,0.5); */
}

.form-popup {
    position: fixed;
    z-index: 99;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    width: 450px;
    height: 600px;
    padding: 25px 35px;
    border-radius: 12px;
    box-sizing: border-box;
    /* overflow: hidden; */
}

.submit-btn {
    width: 200px;
    text-align: center;
    border: none;
    background: #02b1a9;
    height: 40px;
    line-height: 40px;
    color: #fff;
    border-radius: 5px;
    font-family: "微软雅黑";
    font-size: 16px;
    font-weight: bold;
}

.dialog-box-title {
    height: 60px;
    // background: #f8f8f8;
    // border-bottom: #ccc 1px solid;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 25px;
    margin-bottom: 20px;
}

.dialog-box-title h3 {
    // width: 500px;
    font-size: 26px;
    font-weight: normal;
}

.dialog-box-close {
    font-size: 35px;
    margin-left: 0px;
    margin-right: 20px;
    font-weight: normal;
    float: right;
    cursor: pointer;
    display: inline-block;
    float: right;
}

.form-item {
    display: flex;
    font-size: 16px;

    input {
        width: 380px;
        height: 50px;
        line-height: 50px;
        border: none;
        border-radius: 10px;
        padding: 0 30px;
        margin-bottom: 30px;
        // background-color: #dadada;
        background-color: #f1f1f1;
        box-sizing: border-box;
    }

    textarea {
        width: 380px;
        height: 120px;
        line-height: 20px;
        font-size: 16px;
        border: none;
        border-radius: 10px;
        padding: 16px 30px;
        // background-color: #dadada;
        background-color: #f1f1f1;
        box-sizing: border-box;
        margin-bottom: 40px;
    }

    .submit {
        width: 220px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #fff;
        background-color: #128eee;
        border-radius: 10px;
        margin-left: auto;
        cursor: pointer;
    }

    .dialog-close {
        width: 140px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #999;
        background-color: #f1f1f1;
        border-radius: 10px;
        cursor: pointer;
    }
}
</style>